<template>
  <div>
    <van-cell @click="$router.push(`/article/${articleItem.art_id}`)">
      <!-- 标题 -->
      <template #title>
        <p class="title">{{ articleItem.title }}</p>
      </template>
      <!-- label部分 -->
      <template #label>
        <div v-if="articleItem.cover.type === 3" class="label-img">
          <van-image
            v-for="(img, i) in articleItem.cover.images"
            :key="i"
            class="rightImg"
            fit="contain"
            :src="img"
          />
        </div>
        <div class="label">
          {{ articleItem.aut_name }} 评论: {{ articleItem.comm_count }}
          {{ articleItem.pubdate | formatTime }}
        </div>
      </template>
      <!-- 右侧部分 -->
      <template #default>
        <van-image
          v-if="articleItem.cover.type === 1"
          class="rightImg"
          fit="contain"
          :src="articleItem.cover.images[0]"
        />
      </template>
      <template #extra>
        <div class="close" @click.stop="$emit('show', articleItem.art_id)">
          <van-icon name="cross" />
        </div>
      </template>
    </van-cell>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
dayjs.extend(relativeTime)
export default {
  name: 'articleListItem',
  props: {
    articleItem: {
      type: Object,
      required: true
    }
  },
  filters: {
    formatTime (val) {
      return dayjs().to(dayjs(val))
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 10px;
}
.label {
  font-size: 12px;
  margin-top: 25px;
}
.label1 {
}
.rightImg {
  width: 100px;
  height: 60px;
}
.van-cell {
  position: relative;
  .van-cell__value {
    flex: unset;
  }
}

.label-img {
  display: flex;
  justify-content: space-around;
}
.close {
  position: absolute;
  width: 30px;
  height: 30px;
  bottom: 6px;
  right: 18px;
}
</style>
